<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="index++;if(index>3){index=0};">切换</button>
    <components :is="comArr[index]"></components>
<!--    <one v-show="index===0"></one>-->
<!--    <two v-show="index===1"></two>-->
<!--    <three v-show="index===2"></three>-->
<!--    <four v-show="index===3"></four>-->
</div>
</body>
<script>
    new Vue({
        el: "#root",
        data: {
            index: 0,
            comArr:["one","two","three","four"]
        },
        components: {
            one: {
                template: `
                    <div style="width:100px;height:100px;background:red;"></div>
                `
            },
            two: {
                template: `
                    <div style="width:100px;height:100px;background:yellow;"></div>
                `
            },
            three: {
                template: `
                    <div style="width:100px;height:100px;background:green;"></div>
                `
            },
            four: {
                template: `
                    <div style="width:100px;height:100px;background:blue;"></div>
                `
            }
        }
    })
</script>
</html>